<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" th:fragment="content">

<form id="user-form" lay-filter="user-form" class="layui-form" action="" style="display:none;">
    <div class="mainBox">
        <div class="main-container">
            <div class="main-container">
                <div class="layui-form-item">
                    <input type="hidden" id="userFormId" name="id">
                    <input type="hidden" name="version">
                    </div>
                <div class="layui-form-item">
                    <label class="layui-form-label" title="姓名">姓名</label>
                <div class="layui-input-block">
                    <input type="text" maxlength="255" name="name" lay-verify="" class="layui-input">
                </div>
            </div>
                <div class="layui-form-item">
                    </div>
                <div class="layui-form-item">
                    <label class="layui-form-label" title="用户名">用户名</label>
                <div class="layui-input-block">
                    <input type="text" maxlength="50" name="userName" lay-verify="" class="layui-input">
                </div>
            </div>
                <div class="layui-form-item">
                    </div>
                <div class="layui-form-item">
                    <label class="layui-form-label" title="密码">密码</label>
                <div class="layui-input-block">
                    <input type="text" maxlength="100" name="password" lay-verify="" class="layui-input">
                </div>
            </div>
                <div class="layui-form-item">
                    </div>
                <div class="layui-form-item">
                    <label class="layui-form-label" title="手机">手机</label>
                <div class="layui-input-block">
                    <input type="text" maxlength="255" name="mobile" lay-verify="" class="layui-input">
                </div>
            </div>
                <div class="layui-form-item">
                    </div>
                <div class="layui-form-item">
                    <label class="layui-form-label" title="邮箱">邮箱</label>
                <div class="layui-input-block">
                    <input type="text" maxlength="255" name="mail" lay-verify="" class="layui-input">
                </div>
            </div>
                <div class="layui-form-item">
                    </div>
                <div class="layui-form-item">
                    <label class="layui-form-label" title="地址">地址</label>
                <div class="layui-input-block">
                    <input type="text" maxlength="255" name="address" lay-verify="" class="layui-input">
                </div>
            </div>
                <div class="layui-form-item">
                    </div>
                <div class="layui-form-item">
                    <label class="layui-form-label" title="性别">性别</label>
                <div class="layui-input-block">
                    <input type="text" maxlength="5" name="sex" lay-verify="" class="layui-input">
                </div>
            </div>
                <div class="layui-form-item">
                    </div>
                <div class="layui-form-item">
                    <label class="layui-form-label" title="生日">生日</label>
                <div class="layui-input-block">
                    <input type="text" maxlength="255" name="birthday" lay-verify="" class="layui-input">
                </div>
            </div>
                <div class="layui-form-item">
                    </div>
                <div class="layui-form-item">
                    <label class="layui-form-label" title="标签">标签</label>
                <div class="layui-input-block">
                    <input type="text" maxlength="1024" name="label" lay-verify="" class="layui-input">
                </div>
            </div>
                <div class="layui-form-item">
                </div>
            </div>
        </div>
    </div>
    <div class="bottom" style="display: none">
        <div class="button-container">
            <button type="submit" class="layui-btn layui-btn-normal layui-btn-sm" lay-submit="" lay-filter="user-form">
                <i class="layui-icon layui-icon-ok"></i>
                提交
            </button>
            <button type="reset" id="userFormReset" class="layui-btn layui-btn-primary layui-btn-sm">
                <i class="layui-icon layui-icon-refresh"></i>
                重置
            </button>
        </div>
    </div>
</form>

<div class="layui-card">
    <div class="layui-card-header" style="height: 100%;">
        <form class="layui-form search-form" action="">
            <div class="layui-form-item">
                <div class="layui-input-inline">
                    <input type="text" name="id" placeholder="编号" class="layui-input">
                </div>
                <div class="layui-input-inline">
                    <input type="text" name="name" placeholder="姓名" class="layui-input">
                </div>
                <div class="layui-input-inline">
                    <input type="text" name="userName" placeholder="用户名" class="layui-input">
                </div>
                <div class="layui-input-inline">
                    <input type="text" name="password" placeholder="密码" class="layui-input">
                </div>
                <div class="layui-input-inline">
                    <input type="text" name="mobile" placeholder="手机" class="layui-input">
                </div>
                <div class="layui-input-inline">
                    <input type="text" name="mail" placeholder="邮箱" class="layui-input">
                </div>
                <div class="layui-input-inline">
                    <input type="text" name="address" placeholder="地址" class="layui-input">
                </div>
                <div class="layui-input-inline">
                    <input type="text" name="sex" placeholder="性别" class="layui-input">
                </div>
                <div class="layui-input-inline">
                    <input type="text" name="birthday" placeholder="生日" class="layui-input">
                </div>
                <div class="layui-input-inline">
                    <input type="text" name="registrationDate" placeholder="注册日期" class="layui-input">
                </div>
                <div class="layui-input-inline">
                    <input type="text" name="label" placeholder="标签" class="layui-input">
                </div>
                <div class="layui-input-inline">
                    <input type="text" id="userStart" name="start" placeholder="创建时间范围 起" class="layui-input">
                </div>
                <div class="layui-form-mid">-</div>
                <div class="layui-input-inline">
                    <input type="text" id="userEnd" name="end" placeholder="创建时间范围 止" class="layui-input">
                </div>
                <div class="layui-inline">
                <button class="pear-btn pear-btn-sm pear-btn-primary" lay-submit lay-filter="user-query">
                    <i class="layui-icon layui-icon-search"></i>
                    查询
                </button>
                <button type="reset" class="pear-btn pear-btn-sm">
                    <i class="layui-icon layui-icon-refresh"></i>
                    重置
                </button>
                </div>
            </div>
        </form>
    </div>
    <div class="layui-card-body">
        <table id="user-table" lay-filter="user-table"></table>
    </div>
</div>

<script type="text/html" id="user-toolbar">
    <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="add">
        <i class="layui-icon layui-icon-add-1"></i>
        新增
    </button>
</script>

<script type="text/html" id="user-operate-bar">
    <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit">
        <i class="layui-icon layui-icon-edit"></i></button>
    <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove">
        <i class="layui-icon layui-icon-delete"></i></button>
</script>

<script th:src="@{/layui/layui.js}" charset="utf-8"></script>
<script>
    layui.use(['table', 'form', 'jquery', 'laydate', 'layer'], function () {
        let table = layui.table;
        let form = layui.form;
        let laydate = layui.laydate;
        let layer = layui.layer;
        let $ = layui.jquery;

        let BIZ_NAME = 'user';
        let BIZ_TABLE = 'user-table';
        let BIZ_FORM = 'user-form';
        let BIZ_QUERY = 'user-query';
        let tableUserObj;
        let formUserObj;

        let cols = [
            [
                {type: 'checkbox'},
                {title: '', field: 'id', align: 'center'},
                {title: '姓名', field: 'name', align: 'center'},
                {title: '用户名', field: 'userName', align: 'center'},
                {title: '密码', field: 'password', align: 'center'},
                {title: '手机', field: 'mobile', align: 'center'},
                {title: '邮箱', field: 'mail', align: 'center'},
                {title: '地址', field: 'address', align: 'center'},
                {title: '性别', field: 'sex', align: 'center'},
                {title: '生日', field: 'birthday', align: 'center'},
                {title: '注册日期', field: 'registrationDate', align: 'center'},
                {title: '标签', field: 'label', align: 'center'},
                {title: '创建时间', field: 'time', align: 'center'},
                {title: '操作', toolbar: '#user-operate-bar', align: 'center', width: 130}
            ]
        ]
        window.renderUserTable = function (where) {
            tableUserObj = table.render({
                elem: '#' + BIZ_TABLE,
                url: '/' + BIZ_NAME + '/page',
                where: where,
                //data: [{id:1}], // 测试数据
                text: {none: '暂无相关数据'},
                response: {
                    statusCode: 200,
                    msgName: 'message'
                },
                page: true,
                limit: 10,
                limits: [10, 20, 50],
                cols: cols,
                skin: 'line',
                toolbar: '#user-toolbar',
                defaultToolbar: [{
                    layEvent: 'refresh',
                    icon: 'layui-icon-refresh',
                }, 'filter', 'print', 'exports']
            });
        
            table.on('tool(' + BIZ_TABLE + ')', function (obj) {
                if (obj.event === 'remove') {
                    window.removeUser(obj);
                } else if (obj.event === 'edit') {
                    window.userForm(obj);
                }
            });
    
            table.on('toolbar(' + BIZ_TABLE + ')', function (obj) {
                if (obj.event === 'add') {
                    window.userForm();
                } else if (obj.event === 'refresh') {
                    window.refreshUser();
                }
            });
        }

        window.userForm = function (obj) {
            let title;
            if (obj) {
                title = '修改';
            }else {
                title = '新增';
            }
            formUserObj = layer.open({
                type: 1,
                title: title,
                shade: 0.1,
                area: ['50%', '85%'],
                btn: ['立即提交', '取消'],
                yes: function (index, layero) {
                    $('#' + BIZ_FORM + ' [lay-submit]').click();
                },
                cancel: function (index, layero) {
                    layer.close(index);
                },
                content: $('#' + BIZ_FORM),
                success: function (layero, index) {
                    if(obj){
                        // 修改时填充数据
                        form.val(BIZ_FORM, obj.data);
                    }else{
                        // 新增时清空表单
                        form.val(BIZ_FORM, {});
                        $('#userFormId').val('');
                        $('#userFormReset').click();
                    }
                }
            });
        }

        window.removeUser = function (obj) {
            layer.confirm('确定要删除', {icon: 3, title: '提示'}, function (index) {
                layer.close(index);
                let loading = layer.load(2, {time: 5*1000});
                $.ajax({
                    url: "/" + BIZ_NAME + "/remove/" + obj.data['id'],
                    type: 'DELETE',
                    success: function (result) {
                        layer.close(loading);
                        if (result.code === 200) {
                            layer.msg(result.message, {icon: 1, time: 1000}, function () {
                                obj.del();
                            });
                        } else {
                            layer.alert(result.message, {icon: 2});
                        }
                    }
                })
            });
        }

        window.refreshUser = function (param) {
            tableUserObj.reload();
        }
        
        laydate.render({
            elem: '#userStart'
            , type: 'datetime'
        });

        laydate.render({
            elem: '#userEnd'
            , type: 'datetime'
        });
        
        form.on('submit(' + BIZ_QUERY + ')', function (data) {
            tableUserObj.reload({where: data.field})
            return false;
        });
        
        form.on('submit(' + BIZ_FORM + ')', function (data) {
        
            let url = '/save';
            let type = 'PUT';
            //如果id不为空则调用修改接口
            if (data.field.id) {
                url = '/update'
                type = 'POST';
            }
            
            $.ajax({
                url: '/' + BIZ_NAME + url,
                data: JSON.stringify(data.field),
                type: type,
                dataType: 'json',
                contentType: 'application/json',
                success: function (result) {
                    if (result.code === 200) {
                        layer.msg(result.message, {icon: 1, time: 1000}, function () {
                            tableUserObj.reload();
                            layer.close(formUserObj);
                        });
                    } else {
                        layer.alert(result.message, {icon: 2});
                    }
                }
            })
            return false;
        });

        // 初始化运行区
        let tableTitle = $('.layui-tab-title .layui-this').attr('lay-id');
        if (tableTitle === BIZ_TABLE) {
            window.renderUserTable();
        }
    });
</script>
